<template>
  <div class="scrollWrap">
    <ul class="scroller">
      <li class="txt" :class="{on: txtIndex === 0}" @click="changeIndex(0)" >
        <router-link to='/home'>推荐</router-link>
      </li>
      <li class="txt" v-for="(category,index) in categories" :key="index" @click="changeIndex(index+1)" :class="{on: index === txtIndex-1}">
        {{category.text}}
      </li>
    </ul>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import BScroll from 'better-scroll'
  
  export default {
    name: 'index',
    data () {
      return {
        txtIndex: 0,
      }
    },
    computed: {
      ...mapState({
        categories: state => state.home.categories
      })
    },
    methods: {
      changeIndex(index){
        this.txtIndex = index
      }
    },
    mounted () {
      this.$store.dispatch('getMenuCategory')
      this.$nextTick(() => {
        new BScroll('.scrollWrap', {
          scrollX: true,
          click: true
        })
      })
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .scrollWrap
    display flex
    box-sizing border-box
    margin 0 30px
    width 650px
    .scroller
      height 60px
      display flex
      justify-content space-between
      align-items center
      .txt
        width 140px
        height 60px
        line-height 60px
        text-align center
        font-size 28px
        margin-left 0 16px
        &.on
          color #b4282d
          &:after
            content '';
            display block;
            height 5px
            background red;
</style>
